<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>标签的居中</title>
    <style>
        #id1 {
            width: 500px;
            height: 200px;
            background-color: #f37021;

            /*让内容居中*/
            text-align: center;
        }

        .span1 {
            background-color: aqua;

        }

        .button1 {

        }

        #id2 {
            width: 500px;
            height: 200px;
            background-color: #f37021;

            /*垂直居中*/
            text-align: center;
            line-height: 200px;
        }

        .div1 {
            background-color: antiquewhite;
            width:150px;
            margin: auto;
        }

        .span2 {
            background-color: aqua;

        }

        .button2 {

        }

        .div2 {
            background-color: antiquewhite;
            width:150px;
            /*margin: auto;*/
        }

        #id3 {
            width: 500px;
            height: 200px;
            background-color: red;
            text-align: center;
            line-height: 200px;
            position: relative;
        }
        .div3 {
            width: 150px;
            height: 100px;
            line-height: 100px;
            margin: auto;
            background-color: #eb9650;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
    </style>
</head>
<body>
    <!--水平居中-->
    <div id="id1">
        <!--行内标签-->
        <span class="span1">
            我是span标签
        </span>
        <!--行内块级标签-->
        <button class="button1">
            我是button标签
        </button>
        <!--块级标签-->
        <div class="div1">
            我是块级标签
        </div>
    </div>
    <!--垂直居中-->
    <div id="id2">
        <!--行内标签-->
        <span class="span2">
            我是span标签
        </span>
        <!--行内块级标签-->
        <button class="button2">
            我是button标签
        </button>
    </div>
    <div id="id3">
        <div class="div3">
            块级标签的垂直居中
        </div>
    </div>
</body>
</html>